//待完善
//第8行搜索条件，自定义标签，显示为红色
//axios实现数据删除出错，可能是闭包的问题
<template>
  <div id="demoday1">
    <input type="text" placeholder="id" v-model="id"/>
    <input type="text" placeholder="name" v-model="pname"@keydown.enter="add"/>
    <input type="button" value="添加数据" @click="add" />
    <br/><br/>
    搜索条件:<input placeholder="请输入搜索内容" v-focus v-color="color" v-model="sname"/>
    <table class="tb">
      <tr class="thead">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <tr v-show="list.length == 0">
        <td colspan="4">当前列表没有任何数据</td>
      </tr>
      <tr class="tbody" v-for="item in searchname" @key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name}}</td>
        <td>{{ item.ctime | datefmt }}</td>
        <td><a href="javascript:void(0)" @click="vdelete(item.id)">删除</a></td>
      </tr>
    </table>
  </div>
</template>

<script>
  import Vue from 'vue'
  Vue.directive('focus',{
    inserted:function (el,binding) {
      var inputObj = el;
      inputObj.focus();
    }
  });
  Vue.directive('color',{
    bind:function (el,binding) {
      console.log('1-bind');
      el.style.color = binding.value;
    },
    inserted:function () {
      console.log('2-inserted');
    },
    update:function () {
      console.log('3-update');
    },
    componentUpdated:function () {
      console.log('4-componentUpdate');
    },
    unbind:function () {
      console.log('5-unbind');
    }
  });
  export default {
    name: "demo-day1",
    data(){
      return{
        id:'',
        pname:'',
        sname:'',//搜索的内容
        color:'red',
        list:{},
      }
    },
    // Vue对象实例创建成功以后就会自动调用这个方法
    created(){
      this.getlist();
    },
    mounted() {

    },
    computed:{
      //vue2.0中没有系统过滤器，需要自定义
      searchname:function(){
        var sname = this.sname;
        if (sname) {
          return this.list.filter((lists) => {
            return Object.keys(lists).some(function (key) {
              //String() 函数把对象的值转换为字符串
              //indexOf() 函数对大小写敏感，如果要检索的字符串值没有出现，则该方法返回 -1
              //toLowerCase()函数把字符串转换成小写
              return String(lists[key]).toLowerCase().indexOf(sname) > -1;
            })
          });
        } else {
          return this.list;
        }
      }
    },
    methods:{
      //添加数据
      add:function () {
        var url = 'api/message';
        var postdata = {
          name:this.pname,
          ctime:new Date()
        };
        this.axios.post(url,postdata)
          .then((response) =>{
            if(this.pname == ''){
              alert("数据为空，请填写数据");
              return;
            }else{
              alert(response);
              alert("post提交成功");
              //将列表的数据重新加载一次
              this.getlist();
              this.pname = '';
            }
          }).catch((error) =>{
            console.log(error);
            alert("post提交失败");
        });
      },
      //删除数据
      vdelete:function (id) {
        if(!confirm("确定要删除吗？")){
          return;
        }
        var url = '/api/message/';
        this.axios.delete(url + id)
          .then((response) =>{
            alert("删除成功");
            // this.list = response.data;
            //将列表的数据重新加载一次
            this.getlist();
          }).catch((error) =>{
          console.log(error);
          alert("删除失败");
        })
      },
      getlist:function () {
        var url = 'api/message';
        this.axios.get(url)
          .then((response) =>{
            this.list =  response.data;
            console.log(this.list);
          }).catch(function (error) {
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped>
  #demoday1{
    margin: 20px auto;
  }
  .tb{
    width: 300px;
    border:1px solid black;
    border-collapse: collapse;
    margin: 20px auto;/*水平居中，上右下左，左右对称，相当于margin:20px auto 20px auto;*/
  }
  tr{
    border:1px solid black;
  }
  .thead th{
    border:1px solid black;
    background-color: #0094ff;
    padding:5px;
    color:white;
    font-size: 16px;
    text-align: center;
  }
  .tbody{
    border:1px solid black;
    padding: 5px;
    text-align: center;
  }
  .tbody td{
    border:1px solid black;
  }
</style>
